﻿<!-- PropsDemo.vue -->
<template>
  <!-- 通过属性传递不同类型的 prop -->
  <div>
    <h1>{{ title }}</h1>
    <p>喜欢的数量：{{ likes }}</p>
    <p v-if="isPublished">已发布</p>
    <ul>
      <li v-for="id in commentIds" :key="id">
        评论ID: {{ id }}
      </li>
    </ul>
    <p>作者：{{ author.name }}, 公司：{{ author.company }}</p>
  </div>
</template>

<script>
export default {
  name: 'PropsDemo',
  props: {
    // 使用类型校验的 props
    title: {
      type: String,
      required: true
    },
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: {
      type: Object,
      default() {
        // 提供默认值，使用工厂函数方式
        return { name: '未知', company: '未知' };
      }
    }
  },
  created() {
    console.log('组件已创建，传入的标题:', this.title);
  }
}
</script>
